<template>
  <div id="Member-body">
    <div id="Member-formContainer" class="dwo">
      <div class="Member-formLeft">
        <img src="../assets/images/avatar.jpg" />
      </div>
      <div class="Member-formRight">
        <!-- Member_forgot password form -->
        <form id="Member_forgot" class="otherForm">
          <header>
            <h1>忘记密码</h1>
            <p>输入邮箱找回密码</p>
          </header>
          <section>
            <label>
              <p>邮箱</p>
              <input type="email" placeholder=" " />
              <div class="border"></div>
            </label>
            <button type="submit">发送邮件</button>
          </section>
          <footer>
            <button
              type="button"
              class="Member_forgotBtn"
              @click="Member_forgotBtn"
            >
              返回
            </button>
          </footer>
        </form>

        <!-- Login form -->
        <el-form id="login" ref="form" :model="form" :rules="LoginRules">
          <header>
            <h1>欢迎回来</h1>
            <p>请先登录</p>
          </header>
          <section>
            <el-form-item prop="username">
              <p>用户名</p>
              <el-input v-model="form.username" placeholder=" ">
                <template #prefix>
                  <el-icon class="el-input__icon"><UserFilled /></el-icon>
                </template>
              </el-input>
              <div class="border"></div>
            </el-form-item>
            <el-form-item prop="password">
              <p>密码</p>
              <el-input v-model="form.password" show-password placeholder=" ">
                <template #prefix>
                  <el-icon class="el-input__icon"><Lock /></el-icon>
                </template>
              </el-input>
              <div class="border"></div>
            </el-form-item>

            <el-form-item>
              <div style="display: flex">
                <el-input
                  prefix-icon="el-icon-key"
                  v-model="form.validCode"
                  style="width: 50%"
                  placeholder="请输入验证码"
                ></el-input>
                <ValidCode @input="createValidCode" />
              </div>
            </el-form-item>
            <el-form-item prop="role">
              <div style="display: flex">
                <el-radio v-model="form.role" :label="1" style="color: white"
                  >管理员</el-radio
                >
                <el-radio v-model="form.role" :label="2" style="color: white"
                  >普通用户</el-radio
                >
              </div>
            </el-form-item>

            <el-form-item>
              <el-button @click="login">登 录</el-button>
            </el-form-item>
          </section>
          <footer>
            <el-button
              type="text"
              class="Member_forgotBtn"
              @click="Member_forgotBtn"
            >
              忘记密码？
            </el-button>
            <el-button type="text" class="registerBtn" @click="registerBtn">
              新用户？
            </el-button>
          </footer>
        </el-form>

        <!-- Register form -->
        <el-form
          ref="RegisterForm"
          :model="form"
          :rules="RegisterRules"
          id="register"
          class="otherForm"
        >
          <header>
            <h1>用户注册</h1>
            <p>注册后享受更多服务</p>
          </header>
          <section>
            <el-form-item prop="username">
              <p>用户名</p>
              <el-input v-model="form.username" placeholder=" ">
                <template #prefix>
                  <el-icon class="el-input__icon"><UserFilled /></el-icon>
                </template>
              </el-input>
              <div class="border"></div>
            </el-form-item>
            <el-form-item prop="password">
              <p>密码</p>
              <el-input v-model="form.password" show-password placeholder=" ">
                <template #prefix>
                  <el-icon class="el-input__icon"><Lock /></el-icon>
                </template>
              </el-input>
              <div class="border"></div>
            </el-form-item>
            <el-form-item prop="confirm">
              <p>重复密码</p>
              <el-input v-model="form.confirm" show-password placeholder=" ">
                <template #prefix>
                  <el-icon class="el-input__icon"><Lock /></el-icon>
                </template>
              </el-input>
              <div class="border"></div>
            </el-form-item>
            <el-form-item>
              <el-button @click="register">注册</el-button>
            </el-form-item>
          </section>
          <footer>
            <el-button type="text" class="registerBtn" @click="registerBtn">
              返回
            </el-button>
          </footer>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { UserFilled, Lock } from "@element-plus/icons-vue";
import request from "@/utils/request";
// import { activeRouter } from "@/utils/permission";
import ValidCode from "../components/VaildCode.vue";

export default {
  name: "Member",
  components: {
    UserFilled,
    Lock,
    ValidCode,
  },
  create() {
    sessionStorage.removeItem("consumer");
  },
  data() {
    return {
      form: {},
      LoginRules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        role: [
          {
            required: true,
            message: "请选择角色",
            trigger: "blur",
          },
        ],
      },
      RegisterRules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        confirm: [
          {
            required: true,
            message: "请再次确认密码",
            trigger: "blur",
          },
        ],
        validCode: "",
      },
    };
  },
  mounted() {
    sessionStorage.removeItem("consumer");
  },
  methods: {
    // 接收验证码组件提交的 4位验证码
    createValidCode(data) {
      this.validCode = data;
    },
    login() {
      // 如果合法，发送请求
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (!this.form.validCode) {
            this.$message.error("请填写验证码");
            return;
          }
          if (
            this.form.validCode.toLowerCase() !== this.validCode.toLowerCase()
          ) {
            this.$message.error("验证码错误");
            return;
          }
          request.post("/consumer/login", this.form).then((response) => {
            if (response.result === "SUCCESS") {
              this.$message({
                type: "success",
                message: "登录成功",
              });
              console.log(response);
              // 缓存用户信息
              sessionStorage.setItem("consumer", JSON.stringify(response.data));
              // 登录成功的时候更新当前路由
              // activeRouter();
              // 登录成功 页面跳转到主页
              this.$router.push("/");
            } else {
              this.$message({
                type: "error",
                message: response.message,
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    register() {
      if (this.form.password !== this.form.confirm) {
        this.$message({
          type: "error",
          message: "两次密码输入不一致",
        });
        return;
      }
      // 如果合法，发送请求
      this.$refs["RegisterForm"].validate((valid) => {
        if (valid) {
          request.post("/consumer/register", this.form).then((response) => {
            if (response.result === "SUCCESS") {
              this.$message({
                type: "success",
                message: "注册成功",
              });
              // 登录成功 页面跳转到主页
              this.$router.push("/login");
            } else {
              this.$message({
                type: "error",
                message: response.message,
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    Member_forgotBtn() {
      $("#Member_forgot").toggleClass("toggle");
    },
    registerBtn() {
      $("#register, #Member-formContainer").toggleClass("toggle");
    },
  },
};
</script>

<style>
* {
  outline-width: 0;
  font-family: "Nunito" !important;
}

button,
hr,
input {
  overflow: visible;
}
audio,
canvas,
progress,
video {
  display: inline-block;
}
progress,
sub,
sup {
  vertical-align: baseline;
}
html {
  font-family: sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

menu,
article,
aside,
details,
footer,
header,
nav,
section {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
figcaption,
figure,
main {
  display: block;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box;
  height: 0;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}
a:active,
a:hover {
  outline-width: 0;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
dfn {
  font-style: italic;
}
mark {
  background-color: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
img {
  border-style: none;
}
svg:not(:root) {
  overflow: hidden;
}
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
}
button,
select {
  text-transform: none;
}
[type="submit"],
[type="reset"],
button,
html [type="button"] {
  -webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
  outline: ButtonText dotted 1px;
}
fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  display: list-item;
}
[hidden],
template {
  display: none;
} /*# sourceMappingURL=normalize.min.css.map */
</style>
